<template>
  <div class="main">
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <van-row>
        <van-col span="24">
          <van-sticky>
            <form action="/">
              <van-search
                v-model="value"
                show-action
                shape="round"
                placeholder="请输入搜索关键词"
                @search="onSearch"
              >
                <div slot="action" @click="onSearch">搜索</div>
              </van-search>
            </form>
          </van-sticky>
        </van-col>
      </van-row>
      <van-row id="imageContent">
        <van-col span="24">
          <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img v-lazy="image" />
            </van-swipe-item>
          </van-swipe>
        </van-col>
      </van-row>
      <van-row id="customNotice">
        <van-col span="24">
          <van-notice-bar text="商城上新。。。。。。。。。商城上新。。。。。。。。" left-icon="volume-o" />
        </van-col>
      </van-row>
      <van-row id="customGrid">
        <van-col span="24">
          <van-grid :column-num="3" :square="false" :border="false">
            <van-grid-item
              v-for="value in customGrid"
              :key="value.key"
              :icon="value.img"
              :text="value.text"
              :to="value.to"
            />
          </van-grid>
        </van-col>
      </van-row>
      <van-row id="customGoods">
        <van-col span="24">
          <!-- <van-card
        v-for="value in 10"
        :key="value"
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
          />-->
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <!--  <van-cell v-for="item in list" :key="item" :title="item" /> -->
            <van-card
              v-for="value in list"
              :key="value"
              num="2"
              price="26.80"
              desc="描述信息"
              title="美国伽力果"
              thumb="https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg"
              @click="goodsClick(value)"
            />
          </van-list>
        </van-col>
      </van-row>
    </van-pull-refresh>
  </div>
</template>

<script>
import $ from "jquery";
import { Lazyload } from "vant";
import { Toast } from "vant";
import { List } from "vant";
export default {
  name: "shop",
  data() {
    return {
      value: "",
      images: ["./a.jpg", "./b.jpg"],
      list: [],
      cacheData:{},
      loading: false,
      finished: false,
      refreshing: false,
      customGrid: [
        {
          key: 1,
          text: "旅游",
          img:
            "https://ts.bmbs.tech/yingfanwan/201912/27/6808a00a22cb40b1b6c1b384b3cf6f91.png",
          to: "goods"
        },
        {
          key: 2,
          text: "数码",
          img:
            "https://ts.bmbs.tech/yingfanwan/201912/27/8729a8dcec0a4d328bc0f897807c7ec6.png",
          to: "goods"
        },
        {
          key: 3,
          text: "商砼",
          img:
            "https://ts.bmbs.tech/yingfanwan/201912/22/785b696b674644c583dbe5dbd367fddb.png",
          to: "goods"
        },
        {
          key: 4,
          text: "水泥",
          img:
            "https://ts.bmbs.tech/yingfanwan/202002/20/db9fd65495fc496b9efed9f784567bdb.png",
          to: "goods"
        },
        {
          key: 5,
          text: "酒水",
          img:
            "https://ts.bmbs.tech/yingfanwan/201912/22/1d828142cbef42a389c81edda2424d39.png",
          to: "goods"
        },
        {
          key: 6,
          text: "兑换专区",
          img:
            "https://ts.bmbs.tech/yingfanwan/202001/16/3a4fe98ff1404999be22c7427557b792.png",
          to: "goods"
        }
      ],
      goodsList: [
        {
          key: 1,
          text: "旅游",
          img:
            "https://ts.bmbs.tech/yingfanwan/201912/27/6808a00a22cb40b1b6c1b384b3cf6f91.png",
          to: "goods"
        },
        {
          key: 2,
          text: "数码",
          img:
            "https://ts.bmbs.tech/yingfanwan/201912/27/8729a8dcec0a4d328bc0f897807c7ec6.png",
          to: "goods"
        },
        {
          key: 3,
          text: "商砼",
          img:
            "https://ts.bmbs.tech/yingfanwan/201912/22/785b696b674644c583dbe5dbd367fddb.png",
          to: "goods"
        },
        {
          key: 4,
          text: "水泥",
          img:
            "https://ts.bmbs.tech/yingfanwan/202002/20/db9fd65495fc496b9efed9f784567bdb.png",
          to: "goods"
        },
        {
          key: 5,
          text: "酒水",
          img:
            "https://ts.bmbs.tech/yingfanwan/201912/22/1d828142cbef42a389c81edda2424d39.png",
          to: "goods"
        },
        {
          key: 6,
          text: "兑换专区",
          img:
            "https://ts.bmbs.tech/yingfanwan/202001/16/3a4fe98ff1404999be22c7427557b792.png",
          to: "goods"
        }
      ]
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    onCancel() {
      Toast("取消");
    },
    goodsClick(value) {
      debugger
      let page = document.getElementsByClassName('main')[0]
      let scrollTop = page.getBoundingClientRect().top * -1
      console.log(scrollTop)
      window.localStorage.setItem(
      "shop",
      JSON.stringify({
        listScrollTop: scrollTop
      })
    );
      this.$router.push("goods");
    }
  },
  activated() {
    this.cacheData = window.localStorage.getItem("shop")
      ? JSON.parse(window.localStorage.getItem("shop"))
      : null
    
    if(this.cacheData!=null){
      console.log(this.cacheData.listScrollTop)
      document.documentElement.scrollTop=this.cacheData.listScrollTop
      document.body.scrollTop=this.cacheData.listScrollTop
       window.scrollTo({
        top:this.cacheData.listScrollTop
    })
    }
    window.localStorage.setItem(
      "shop",
      JSON.stringify({
        listScrollTop: 0
      }))
  }
};
</script>
<style scoped>
#imageContent {
  margin-top: 1rem;
  width: 100%;
  height: 8rem;
}
img {
  height: 100%;
  width: 100%;
}
</style>